<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日历</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{margin: 0;padding: 0;}
			ul,li{list-style:none;}
			img{border:0px;}
			body{
				font-family:"楷体";
				font-size:14px;
			}
			#rili{
				width:300px;
				margin:100px auto;
			}
			.title{
				height:30px;
				width:298px;
				background-color:rgb(21,166,253);
				position:relative;
				line-height:30px;
				border:1px solid #000;
			}
			.title div{
				position:absolute;
			}
			.title1{
				left:10px;
			}
			.title2{
				left:38%;
			}
			.title3{
				right:10px;
			}
			table{
				width: 100%;
				border-collapse:collapse;
			}
			table td,th{
				border:1px solid #000;
				text-align:center;
				height:25px;
			}
			.b{
				background-color:blue;
			}
			.title1,.title3{
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div id="rili">
			<!-- <div id="" class="title">
				<div id="" class="title1">
					<span id="">6</span>月
				</div>
				<div id="" class="title2">
					<span id="">2021</span>年<span id="">7</span>月
				</div>
				<div id="" class="title3">
					<span id="">8</span>月
				</div>
			</div>
			<table border="" cellspacing="" cellpadding="">
				<thead>
					<tr>
						<th>日</th>
						<th>一</th>
						<th>二</th>
						<th>三</th>
						<th>四</th>
						<th>五</th>
						<th>六</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
				</tbody>
			</table> -->
		</div>
	</body>
</html>
<script type="text/javascript">

	//获取当前时间
	var oDate=new Date;
	var year=oDate.getFullYear();
	var moth=oDate.getMonth()+1;
	
	dtcjrl(year,moth);
	
	//动态创建日历
	function dtcjrl(year,moth){
		
		//动态创建标题
		var rl=document.getElementById('rili');
		var oTitle=document.createElement('div');
		if(moth-1==0){
			var moths=12;
		}else{
			var moths=moth-1;
			if(moths<10){
				moths='0'+moths;
			}
		}
		if(moth+1==13){
			var mothx='01';
		}else{
			var mothx=moth+1;
			if(mothx<10){
				mothx='0'+mothx;
			}
		}
		if(moth<10){
			var mothz='0'+moth;
		}else{
			var mothz=moth;
		}
		oTitle.className='title';
		oTitle.innerHTML='<div id="" class="title1"><span id="">'+moths+'</span>月</div><div id="" class="title2"><span id="">'+year+'</span>年<span id="">'+mothz+'</span>月</div><div id="" class="title3"><span id="">'+mothx+'</span>月</div>';
		rl.appendChild(oTitle);
		
		//创建星期部分
		var oTable=document.createElement('table');
		var oThead=document.createElement('thead');
		var oTr=document.createElement('tr');
		rl.appendChild(oTable);
		oTable.appendChild(oThead);
		oThead.appendChild(oTr);
		var weeks=['日','一','二','三','四','五','六'];	
		for(var i=0;i<weeks.length;i++){
			var oTh=document.createElement('th');
			oTh.innerHTML=weeks[i];
			oTr.appendChild(oTh);
		}
		
		//创建日期部分
		if(moth==1||moth==3||moth==5||moth==7||moth==8||moth==10||moth==12){
			var dayNum=31;
		}else if(moth==4||moth==6||moth==9||moth==11){
			var dayNum=30;
		}else if(moth==2&&isLeapYear(year)){
			var dayNum=29;
		}else{
			var dayNum=28;
		}
		function isLeapYear(year){
			if(year%400==0){
				return true;
			}else if(year%100!=0&&year%4==0){
				return true;
			}else{
				return false;
			}
		}
		//确定当月一号是周几
		oDate.setFullYear(year);
		oDate.setMonth(moth-1);
		oDate.setDate(1);
		var week=oDate.getDay();
		var oTbody=document.createElement('tbody');
		oTable.appendChild(oTbody);
		for(var i=0;i<6;i++){
			var oTr=document.createElement('tr');
			oTbody.appendChild(oTr);
			for(var j=0;j<7;j++){
				var oTd=document.createElement('td');
				oTr.appendChild(oTd);
			}
		}
		var oTds=document.getElementsByTagName('td');
		for(var i=1;i<=dayNum;i++){
			oTds[i-1+week].innerHTML=i;
		}
		
		//给上一月和下一月绑定点击事件
		var syy=document.getElementsByClassName('title1')[0];
		var xyy=document.getElementsByClassName('title3')[0];
		syy.onclick=function(){
			rl.innerHTML='';
			if(moth==1){
				year--;
				dtcjrl(year,12);
			}else{
				dtcjrl(year,moth-1);
			}
		}
		xyy.onclick=function(){
			rl.innerHTML='';
			if(moth==12){
				year++;
				dtcjrl(year,1);
			}else{
				dtcjrl(year,moth+1);
			}
		}
		
		//当前日期显示蓝色
		var odate=new Date;
		var year0=odate.getFullYear();
		var month0=odate.getMonth()+1;
		var date=odate.getDate();
		var spans=document.getElementsByTagName('span');
		for(var i=0;i<oTds.length;i++){
			if(year0==spans[1].innerHTML&&month0==spans[2].innerHTML&&date==oTds[i].innerHTML){
				oTds[i].className='b';
			}
		}
		
		//最后一行没有内容的话隐藏
		if(oTds[35].innerHTML==''){
			for(var i=35;i<42;i++){
				oTds[i].style.display='none';
			}
		}
	}
	
</script>